<template>
	<view v-if="ruleForm && Object.keys(ruleForm).length>0" :style="{
		'padding-bottom':`${ruleForm.buyerOrderList.status === 1?'60px':'20px'};`
	}">
		<view class="header">
			<view class="header-status" v-if="ruleForm.buyerOrderList.status!==0">
				{{getStatusLabel(orderType,ruleForm.buyerOrderList.status)}}
			</view>
			<view class="header-status" v-else>
				订单已取消，取消原因：{{ruleForm.buyerOrderList.remarks}}
			</view>
			<view class="header-time">
				<c-time-line :status="ruleForm.buyerOrderList.status"></c-time-line>
			</view>

		</view>
		<!-- 订单信息 -->
		<view class="order-details_body">
			<view class="u-flex u-margin-bottom-30">
				<image class="picture" :src="ruleForm.product.productDetail.prodcutPicList.thumbnailUrl">
				</image>
				<view class="vehicle-info">
					<view class="name">{{ruleForm.buyerOrderList.productInfo}}</view>
					<view class="number">x {{ruleForm.buyerOrderList.productAmount}}</view>
				</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="u-margin-top-30 ">
				<view class="u-flex u-row-between">
					<view class="headline">详细信息</view>
					<view class="contract" v-if="ruleForm.buyerContractList.url"
						@click="openFile(ruleForm.buyerContractList.url)">
						<image src="@/static/img/icon_information.png"></image>
						<text class="u-margin-left-4">合同预览</text>
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-30">
					<view class="subtitle">付汇方式</view>
					<view class="content"> {{ ruleForm.buyerOrderList.payMode }}</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">成交方式</view>
					<view class="content">{{ ruleForm.buyerOrderList.tradeMode }}</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">目的港</view>
					<view class="content">{{getPortName(ports,ruleForm.buyerOrderList.endHarborId)}}</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24 u-margin-bottom-30">
					<view class="subtitle">约定付款时间</view>
					<view class="font-size">{{ruleForm.buyerOrderList.payTimeNode}}</view>
				</view>
				<u-line color="#F2F2F2" />
				<view class="u-flex u-row-right u-margin-top-24">
					<view class="u-font-26" style="color: #8A8A8A;">实付款：</view>
					<view style="color: #F76260;">
						<text class="u-font-24">￥</text>
						<text class="u-font-26">{{ruleForm.buyerOrderList.productSumPrice | thousands}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他信息 -->
		<view class="other-info">
			<!-- 进口商信息 -->
			<view class="headline">进口商信息</view>
			<view class="u-flex u-row-between u-margin-top-30">
				<view class="subtitle">企业名称</view>
				<view class="content">{{ ruleForm.buyerInfo.name }}</view>
			</view>
			<view class="u-flex u-row-between u-margin-top-24 ">
				<view class="subtitle">联系邮箱</view>
				<view class="content">{{ ruleForm.buyer.email }}</view>
			</view>

			<!-- 发货信息 -->
			<view class="u-margin-top-30" v-if="orderDeliveryItem">
				<u-line color="#F2F2F2" />
				<view class="u-flex u-row-between u-margin-top-30">
					<view class="headline">发货信息</view>
					<view class="contract" @click="handleDeliverySchedule">
						<image src="@/static/img/icon_information.png"></image>
						<text class="u-margin-left-4">发货进度</text>
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">发货单</view>
					<view class="purchase-bill" @click="shows.orderDelivery = true">
						<view>{{orderDeliveryItem.id}}</view>
						<image src="@/static/img/icon_arrowright.png" mode=""></image>
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">车辆信息</view>
					<view class="content">{{orderDeliveryItem.productInfo}}</view>
				</view>
				<view class="u-margin-top-24">
					<view class="subtitle">车架号</view>
					<view class="u-margin-top-20 u-flex u-flex-wrap">
						<view class="vin" v-for="(item,index) in orderDeliveryItem.vinList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<!-- 出口信息 -->
			<view class="u-margin-top-20" v-if="orderDeliveryItem && orderDeliveryItem.transportList">
				<u-line color="#F2F2F2" />
				<view class="headline  u-margin-top-30">出口信息</view>
				<view class="u-flex u-row-between u-margin-top-30">
					<view class="subtitle">海运提单号</view>
					<view class="content">
						{{orderDeliveryItem.transportList.seaBillNo}}
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">船名/船次</view>
					<view class="content">
						{{ orderDeliveryItem.transportList.shipName }}/{{orderDeliveryItem.transportList.shipNo}}
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24">
					<view class="subtitle">预计到港日</view>
					<view class="content">
						{{orderDeliveryItem.transportList.estimateArrivalDate | dateYMDHMSFormat}}
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-24 ">
					<view class="subtitle">出口日期</view>
					<view class="content">
						{{orderDeliveryItem.transportList.exportDate | dateYMDHMSFormat}}
					</view>
				</view>
				<view class="export-file">
					<block v-for="(item,index) in getExportFile" :key="index">
						<view class="export-file_item" v-for="(d,j) in item.list" :key="j" @click="openFile(d)">
							<image src="@/static/img/icon_information.png"></image>
							<text class="u-margin-left-4">{{item.label}}</text>
						</view>
					</block>


					<view class="export-file_item" @click="handlePackingInfo">
						<image src="@/static/img/icon_information.png"></image>
						<text class="u-margin-left-4">装箱信息</text>
					</view>

				</view>
			</view>
			<!-- 提车信息 -->
			<view class="u-margin-top-30" v-if="ruleForm.buyerPickupApply">
				<u-line color="#F2F2F2" />
				<view class="u-flex u-row-between u-margin-top-30">
					<view class="headline">提车信息</view>
					<view class="contract" @click="openFile(ruleForm.buyerPickupApply.pickupAddress.url)">
						<image src="@/static/img/icon_information.png"></image>
						<text class="u-margin-left-4">提车凭证</text>
					</view>
				</view>
				<view class="u-flex u-row-between u-margin-top-30">
					<view class="subtitle">仓库名称</view>
					<view class="content">{{ruleForm.buyerPickupApply.pickupAddress}}</view>
				</view>
			</view>
		</view>
		<view class="order-botton" v-if="ruleForm.buyerOrderList.status === 1">
			<u-button type="success" :custom-style="buttonCustomStyle" shape="circle" size="mini"
				@click="handleConfirm">确认</u-button>
			<u-button type="success" class="u-margin-left-16" :custom-style="buttonCustomStyle" shape="circle"
				size="mini" @click="shows.reject = true">取消</u-button>
		</view>

		<c-reject v-model="shows.reject"  @submit="handleReject" />
		<u-select value-name="id" label-name="id" v-model="shows.orderDelivery" mode="single-column"
			:list="ruleForm.orderDeliveryList" @confirm="handleOrderDeliveryConfirm"></u-select>
	</view>
</template>

<script>
	import cTimeLine from './components/c-time-line.vue'
	import cReject from '@/components/c-reject/index.vue'
	import {
		orderType,
		getStatusLabel
	} from "@/utils/status.js";
	import {
		getPortName
	} from '@/utils/port.js'
	import {
		openFile,
		getExportFiles
	} from '@/utils/index.js'
	export default {
		components: {
			cTimeLine,
			cReject
		},
		data() {
			return {
				buttonCustomStyle: {
					'color': '#303030',
					'border-radius': '15px',
					'border': '1px solid #D8D8D8',
					'font-size': '13px',
					'background': '#fff',
					'padding': '4px 24px'
				},
				shows: {
					reject: false,
					orderDelivery: false,
				},
				orderType,
				ruleForm: {},
				ports: [],
				orderId: null,
				orderDeliveryItem: null
			}
		},
		computed: {
			getExportFile() {
				if (!this.orderDeliveryItem || 
					!this.orderDeliveryItem.transportList) {
					return []
				}
				const list = getExportFiles(
					this.orderDeliveryItem.transportFilesList,
					this.orderDeliveryItem.transportList.carOutApplyId,
					[0,1,2]
				)
				return list
			}
		},
		onLoad(options) {
			this.orderId = options.id
		},
		onShow() {
			this.getById()
			this.getAllHarborInfo()
		},
		methods: {
			handleOrderDeliveryConfirm(list) {
				const item = this.ruleForm.orderDeliveryList.find(x => {
					return x.id === list[list.length - 1].value
				})
				this.orderDeliveryItem = item
			},
			handlePackingInfo(){
				uni.navigateTo({
					url: `/pages/order/packingInfo?id=${this.orderId}&shipmentId=${this.orderDeliveryItem.id}`
				})
			},
			handleDeliverySchedule() {
				uni.navigateTo({
					url: `/pages/order/deliverySchedule?id=${this.orderId}`
				})
			},
			handleConfirm() {
				uni.navigateTo({
					url: `/pages/order/orderConfirm?id=${this.orderId}`
				})
			},
			async handleReject(rejection) {
				uni.showLoading({
					title: '加载中...'
				});
				const params = {
					flag: false,
					id: this.orderId,
					rejection
				}
				await this.$api.getOrderApproval(params);
				this.getById()
			},
			async getById() {
				uni.showLoading({
					title: '加载中...'
				});
				this.ruleForm = {}
				const res = await this.$api.getOrderById({
					id: this.orderId
				})
				this.ruleForm = res.result || {}
				if (res.result.orderDeliveryList.length > 0) {
					// 发货信息
					this.orderDeliveryItem = res.result.orderDeliveryList[0]
				}
				uni.hideLoading();
			},
			async getAllHarborInfo() {
				const res = await this.$api.getAllHarborInfo()
				this.ports = res.result
			},
			getStatusLabel,
			openFile,
			getPortName
		}
	}
</script>
<style scoped lang="less">
	.order-botton {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		width: 100%;
		padding: 12px 15px;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.headline {
		font-size: 16px;
		font-weight: 500;
		color: #202020;
	}

	.subtitle {
		font-size: 13px;
		font-weight: 400;
		color: #666666;
	}

	.purchase-bill {
		font-size: 13px;
		color: #202020;
		display: flex;
		align-items: center;

		&>image {
			width: 12px;
			height: 12px;
			margin-left: 5px;
		}
	}

	.content {
		font-size: 13px;
		font-weight: 400;
		color: #202020;
	}

	.header {
		background: #58C189;
		padding: 10px 15px;

		.header-status {
			font-size: 17px;
			color: #FFFFFF;
			font-weight: 500;
			margin-bottom: 10px;
		}

		.header-time {
			background: #8AD4AD;
			border-radius: 8px;
			padding: 10px 8px;
			margin-bottom: 69px;
		}

	}

	.order-details_body {
		width: 345px;
		background: #FFFFFF;
		border-radius: 8px;
		margin: -49px auto 0 auto;
		z-index: 2;
		padding: 15px;

		.picture {
			width: 80px;
			height: 60px;
		}

		.vehicle-info {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			height: 60px;
			padding-left: 10px;
			padding-top: 7px;
			padding-bottom: 7px;

			.name {
				color: #202020;
				font-size: 14px;
			}

			.number {
				font-size: 13px;
				color: #919191;
			}
		}


	}

	.contract {
		color: #0FBD7F;
		background: rgba(15, 189, 127, 0.07);
		border-radius: 3px;
		font-size: 12px;
		line-height: 17px;
		display: flex;
		align-items: center;
		padding: 3px 5px;

		&>image {
			width: 14px;
			height: 14px;
		}

	}

	.other-info {
		width: 345px;
		background: #FFFFFF;
		border-radius: 8px;
		margin: 10px auto;
		padding: 15px;

		.vin {
			color: #0FBD7F;
			padding: 5px 8px;
			background: rgba(15, 189, 127, 0.07);
			border-radius: 3px;
			font-size: 11px;
			margin-right: 5px;
			margin-bottom: 5px;
		}

		.export-file {
			background: #F7F7F7;
			border-radius: 8px;
			padding: 12px 12px 0 12px;
			display: flex;
			justify-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 15px;

			.export-file_item {
				display: flex;
				justify-items: center;
				color: #0FBD7F;
				font-size: 13px;
				padding-bottom: 12px;

				&>image {
					width: 16px;
					height: 16px;
				}
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>